<template>
  <div class="app-detail-footer" :style="{'background':bgColor}">
    <p>联系我们（工作时间：8:30-22:00）</p>
    <div class="flex">
      <p>400-xxx-0108</p>
      <p>xxxx@163.com</p>
      <a href="">在线客服</a>
    </div>
    <div class="line">
      <nuxt-link to="/" :style="{'color':color}">关于我们</nuxt-link>
      <nuxt-link to="/" :style="{'color':color}">关于我们</nuxt-link>
      <nuxt-link to="/" :style="{'color':color}">关于我们</nuxt-link>
      <nuxt-link to="/" :style="{'color':color}">关于我们</nuxt-link>
    </div>
    <div class="flex2">
      <a href="">京ICP备xxxxxxx号</a>
      <a href="">经营性网站备案信息</a>
      <a href="">公安备案号1101xxxxxxxxx143</a>
      <a href="">家长监护</a>
      <a href="">中国互联网举报中心</a>
      <a href="">©1999-2021北京创新乐知网络技术有限公司</a>
    </div>
  </div>
</template>
<script>
export default {
  name:'app-detail-footer',
  props:{

    color:{
      type:String,
      default:"#333"
    },
    bgColor:{
      type:String,
      default:"#ffffff"
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.app-detail-footer{
  width: 288px;
  // background-color: white;
  padding: 20px;
  box-sizing: border-box;
  p,a{
    font-size: 14px;
    color: #999AAA;
  }
  .flex,.flex2{
    display: flex;
    justify-content: space-between;
  }
  .flex2{
    flex-wrap:wrap;
    a{
      font-size: 13px;
    }
  }
  .line{
    display: flex;
    border-top: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3;
    padding: 5px 0;
    margin: 5px 0;
    box-sizing: border-box;
    justify-content: space-between;
    a{
      font-size: 14px;
      color: #333333;
    }
  }
  a:hover{
    color: #F5243E!important;
  }
}
</style>
